import {useEffect} from 'react';
import Taro, {getCurrentInstance} from "@tarojs/taro";
import {connect} from 'react-redux';
import {View, ScrollView} from '@tarojs/components';
import {Empty } from '@nutui/nutui-react-taro'
import Order from './orderCard';

function Orders(props) {
    const {dispatch, fleetRecordList = [], current, fleetTotal, loading} = props;
  const params = getCurrentInstance()?.router?.params || {}; // 路由参数
  console.log('params', params)
    console.log('fleetRecordList', fleetRecordList);
    useEffect(() => {
        dispatch({
            type: 'order/initFleetPage',
            payload: {
              fleetAccountId: params?.fleetAccountId
            }
        })
    }, []);
    return (
        <View>
          {
            fleetRecordList.length ? <ScrollView
                scrollY
                scrollWithAnimation
                className='orderWrap'
                enhanced
                onScrollEnd={(e) => {
                  console.log('onScrollEnd', e);
                  // scrollTop > 0, PullToRefresh 不触发 touchmove 事件。
                  if (e.detail?.scrollTop) {
                    setScrollTop(e.detail?.scrollTop)
                  }
                }}
                onScrollToLower={(e) => {
                  console.log('onScrollToLower', e);
                  if (fleetRecordList.length < fleetTotal) {
                    // wx.showToast({title: '正在加载更多数据...', icon: 'none', duration: 1000});
                    Taro.showLoading({
                      title:'正在加载更多订单...',
                      mask:false,
                    })
                    dispatch({
                      type: 'order/loadMoreFleetOrder',
                    });
                    if (!loading){
                      Taro.hideLoading()
                    }
                  } else {
                    wx.showToast({title: '已经到底了...', icon: 'none', duration: 1000});
                  }
                }}
              >
                {fleetRecordList.map((i) => <Order order={i} isFleetOrder={true} fleetName={params.fleetName}/>) }
              </ScrollView> :
              <Empty
                description='暂无充电记录'
                     style={{backgroundColor: 'transparent', paddingTop: '100rpx'}}/>
          }
        </View>
    )
}

export default connect((
  {
    order,
    loading: {effects: {"order/loadMoreFleetOrder": loading = false} = {}} = {},
  } = {}
) => {
    return {
      ...order,
      loading
    }
})(Orders)
